<template>
  <div>
    姓名：<input v-model="salaryInfo.userName" /> <button @click="changeName">名字后⾯加
      1</button> {{ salaryInfo.userName }} <br />
    薪⽔：<input type="number" v-model="salaryInfo.salary" /> <button @click="addSalary">薪
      ⽔加1000</button> {{ salaryInfo.salary }}
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
// 对象类型⽤reactive声明响应式
// 基础类型响应式数据，只能⽤ref声明。
// 对象型响应式数据，ref，reactive都可以。通常⼤对象推荐使⽤reactive。
let salaryInfo = reactive({ userName: "王⼀", salary: 15000 })
function changeName() {
  salaryInfo.userName += "⼀"
}
function addSalary() {
  salaryInfo.salary += 1000
  //观察SalaryInfo对象
  console.log("salaryInfo", salaryInfo)
}
</script>
<style scoped></style>
